import React, { Fragment, PureComponent } from 'react';
import { connect } from 'dva';
import { Route, Redirect, Switch, routerRedux } from 'dva/router';
import NotFound from '../../Exception/404';
import { getRoutes } from '../../../utils/utils';
import styles from '../style.less';

import { Card, Steps } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const { Step } = Steps;

@connect(({ gameList, loading }) => ({
  gameList,
  submitting: loading.effects['gameList/modifyGame'],
}))
export default class GameDetail extends PureComponent {
  getCurrentStep = () => {
    const { location } = this.props;
    const { pathname } = location;
    const pathList = pathname.split('/');
    switch (pathList[pathList.length - 1]) {
      case 'info':
        return 0;
      case 'zubie':
        return 1;
      case 'signInfo':
        return 2;
      case 'chouqian':
        return 3;
      case 'match':
        return 4;
      case 'kongchang':
        return 5;
      case 'score':
        return 6;
      default:
        return 0;
    }
  };

  gotoStep = step => {
    const { dispatch, location } = this.props;
    const pathArray = location.pathname.split('/');

    const id = pathArray[3];
    dispatch(routerRedux.push(`/badminton/detail/${id}/${step}`));
  };

  render() {
    const { match, routerData, location, children } = this.props;
    return (
      <PageHeaderWrapper tabActiveKey={location.pathname}>
        <Card bordered={false}>
          <Fragment>
            <Steps current={this.getCurrentStep()} className={styles.steps}>
              <Step title="信息" onClick={() => this.gotoStep('info')} />
              <Step title="组别" onClick={() => this.gotoStep('zubie')} />
              <Step title="报名" onClick={() => this.gotoStep('signInfo')} />
              <Step title="抽签" onClick={() => this.gotoStep('chouqian')} />
              <Step title="编排" onClick={() => this.gotoStep('match')} />
              <Step title="控场" onClick={() => this.gotoStep('kongchang')} />
              <Step title="成绩" onClick={() => this.gotoStep('score')} />
            </Steps>
            {children}
          </Fragment>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
